<script>
import { getLogin, getRegisterByEmailPassword } from "../api/login";
import Home from "./Home.svelte"
import Api from "../services/Api"
import { onMount } from "svelte";
import axios from 'axios';
import {push} from 'svelte-spa-router'
let password = "";
let email = "";
let users;
let regis = {};
let logRst = "";
let code = -1;
let res = null;
// let data = {email: email, password: password}
let data=[];
// const service  = axios.create({
//   baseURL: "http://localhost:5200",
//   withCredentials: true,
//   timeout: 5000
// })



let tasks;
let isLoading = true;

// fetch("http://localhost:8080/user", {
//   method: "GET",
//   headers: {
//     "Content-Type": "application/json"
//   },
// })
//   .then(async (res)=> {
//     tasks = await res.json();
//     isLoading = false;
//   })
//   .catch((err)=> {
//     console.log("error fetching tasks from backend: ", err);
//     isLoading = false;
//   })
let time = ""
// onMount(async ()=> {
//   const evtSrc = new EventSource("http://localhost:5200/event")
//   evtSrc.onmessage = function(event) {
//     time = event.data
//   }

//   evtSrc.onerror = function(event) {
//     console.log(event)
//   }


//   // const response = await service.get('http://127.0.0.1:5200/api/data').then(
//   //   (response)=>{
//   //     console.log(response)
//   //     data = response.data;
//   //   }
//   //   ).catch(
//   //     (error)=> {
//   //       console.log(error)
//   //     }
//   // )
// })
async function getTime() {
  const res = await fetch("http://8.130.73.191/api/login")
  if(res.status !== 200) {
    console.log("Could not connect to the server")

  }
}
const dataW = () =>{
    return {
      tableData: [],
      newTitle: ""
    };
}
  const handleOnClick = event =>{
    // const name = event.target.name;
    // getRegisterByEmailPassword(email, password).then(res => {
    //   regis= {
    //     name:res.email,
    //     pwd: res.password,
    //   };
    // });

  };


async function handleOnLogin(){
      fetch('http://8.130.73.191/api/login', {
      method: "POST",
      // headers: {
      //   "Content-Type": "application/json",
      //   "Access-Control-Allow-Origin": "*",
      // },
      body: JSON.stringify({ name: email, pwd: password }),
    })
    .then(async(res)=>{
      const statu = await res.json();
      if(res.status === 200) {
        console.log("longin sucessfully")
        axios.defaults.headers.common['Authorization'] = `Bearer ${res.status}`;
        await push('/');
      }
    })

      // const res = await fetch("http://localhost:9000/login")
}
  // const res = await fetch("http://localhost:5200/login")
  // if(res.status !== 200) {
  //   console.log("Could not connect to the server")

  // }


async function handleOnRegister (){
  // getLogin(email, password).then(res =>{
    //   const res = post('http://localhost:5200/register', {
    //   method: "POST",
    //   headers: {
    //     "Content-Type": "application/json"

    //   },
    //   body: JSON.stringify({ name: email, pwd: password }),
    // })


  // })

}



  // fetch("http://localhsot:9000/users", {
  //   method: "GET",
  //   headers: {
  //     "Content-Type": "application/json",
  //   },
  // })
  // .then(async(res)=> {
  //   users = await res.json();

  // })
  // .catch((err)=>{
  //   console.log("error fetching users from backend: ", err);
  // })
// let email = '', password = '';

// $: submit = async () => {
//     const response = await axios.post('login', {
//         email,
//         password
//     }, {withCredentials: true})
//     .then(function(response) {
//       console.log(response)
//     })
//     .catch(function(error){
//       console.log(error)
//     })

//     if (response.status === 200) {
//         axios.defaults.headers.common['Authorization'] = `Bearer ${response.data.token}`;

//         await push('/');
//     }
// }
  function handleDelete(e) {
    tasks = tasks.filter((task) => task.id !== e.detail.id);
  }


</script>

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.11/tailwind.min.css"
  integrity="sha512-KO1h5ynYuqsFuEicc7DmOQc+S9m2xiCKYlC3zcZCSEw0RGDsxcMnppRaMZnb0DdzTDPaW22ID/gAGCZ9i+RT/w=="
  crossorigin="anonymous"
/>

<style>

  * {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.backgroundm {
  background: url('https://images.unsplash.com/photo-1556745757-8d76bdb6984b')
    no-repeat center center/cover;
  position: absolute;
  top: -20px;
  bottom: -20px;
  left: -20px;
  right: -20px;
  z-index: -1;
  filter: blur(20px);
}

#lg {
  width:30%;
  height: 70%;
  position:absolute;
top:20%;
left:36%;
margin:-0px 0 0 0px;
}

</style>

<div class="backgroundm" id="backgroundm"></div>
<div class="bg-white rounded p-10 text-center shadow-md" id="lg">
  <form on:submit|preventDefault={handleOnLogin}>
  <!-- <form on:submit|preventDefault={submit}> -->
  <h1 class="text-3xl">Login Please Dear</h1>
  <p class="text-sm text-gray-700">Wish you good luck every day!</p>
  <div class="my-4 text-left">
    <label for="email" class="text-gray-900">Email:</label>
    <input
      type="text"
      class="border block w-full p-2 mt-2 rounded"
      id="email"
      placeholder="Enter Email"
      bind:value={email}
    />
  <div class="my-4 text-left">
    <label for="email" class="text-gray-900">Password:</label>
    <input
      type="password"
      class="border block w-full p-2 mt-2 rounded"
      id="password"
      placeholder="Enter Password"
      bind:value={password}
    />
  </div>
  <button
    class="bg-black text-white py-2 mt-4 inline-block w-full rounded"
    type="submit"
  >
    login
  </button>
  </div>
</form>



  <!-- </form> -->
</div>
